<template>
  <div class="singersongs">
    <Header>
      <span slot="middle">{{ detail.name }}</span>
    </Header>
    <van-notice-bar left-icon="volume-o" :text="detail.desc" />
    <video :src="videourl" controls width="100%" autoplay></video>
    <div class="middle">
      <h4>点击切换清晰度</h4>
      <p>
        <button @click="changeQ2(brs['480'])">480</button>
        <button @click="changeQ3(brs['720'])">720</button>
        <button @click="changeQ4(brs['1080'])">1080</button>
      </p>
    </div>

    <h2>精彩热评</h2>
    <div
      v-for="(item, index) in hotComments"
      :key="item.commentId + index"
      class="ping"
    >
      <p>{{ item.content }}</p>
      <span>{{ item.timeStr }}</span>
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa' }" />
    </div>
  </div>
</template>

<script>
import { getmvurl, getword, getmvAPI } from "../../api/music";
import Header from "../../components/NavBar.vue";
export default {
  data() {
    return {
      videourl: "",
      detail: {},
      brs: {},
      imgsrc: "",
      hotComments: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取评论
    async getping(id) {
      const result = await getmvAPI(id);
      console.log(result);
      this.hotComments = result.hotComments;
    },
    //获取mvurl
    async getmvs(id) {
      const result = await getmvurl(id);
      console.log(result);
      this.videourl = result.data.url;
    },
    //获取mv详情以及清晰度
    async getwords(id) {
      const result = await getword(id);
      console.log(result.data);
      if (result.code == 200) {
        this.detail = result.data;
        this.brs = result.data.brs;
      }
    },
    //清晰度
    changeQ2(str) {
      this.videourl = str;
    },
    changeQ3(str) {
      this.videourl = str;
    },
    changeQ4(str) {
      this.videourl = str;
    },
  },
  created() {
    console.log(this.$route.params.id);
    const id = this.$route.params.id;
    this.getping(id);
    this.getmvs(id);
    this.getwords(id);
  },
  mounted() {},
  components: {
    Header,
  },
};
</script>
<style scoped>
h2 {
  padding-left: 5px;
}
.middle {
  padding: 10px;
}
.ping {
  padding: 10px;
}
</style>